import React, {Component} from "react";

import {Button, Icon, Modal, Table} from "antd";
import TextArea from "antd/es/input/TextArea";
import Text from "antd/es/typography/Text";

export default class Columns extends Component {
    columnColumns = [
        {
            title: 'ID',
            dataIndex: 'ID',
            key: 'ID',
        },
        {
            title: '创建时间',
            dataIndex: 'CreatedAt',
            key: 'CreatedAt',
        },
        {
            title: '任务ID',
            dataIndex: 'seed_id',
            key: 'seed_id',
        },
        {
            title: '任务Url',
            dataIndex: 'seed.url',
            key: 'seed_url',
        },
        {
            title: '排版Json',
            dataIndex: 'value',
            key: 'value',
        },
        {
            title: '操作',
            render: (item) => (
                <Button type={"danger"} size={"small"} onClick={() => this.deleteColumns(item)}>删除</Button>)
        },
    ];

    seedColumns = [
        {
            title: 'ID',
            dataIndex: 'ID',
            key: 'ID',
        },
        {
            title: '创建时间',
            dataIndex: 'CreatedAt',
            key: 'CreatedAt',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Url',
            dataIndex: 'url',
            key: 'url',
        },
        {
            title: '解析方法名',
            dataIndex: 'function_name',
            key: 'function_name',
        },
    ];

    constructor(props) {
        super(props);

        this.state = {
            columns: [],
            columnsCurrent: 0,
            columnsCount: 0,

            seeds: [],
            seedsCurrent: 0,
            seedsCount: 0,

            addColumnsVisible: false,
            addSeedID: 0,
            addValue: '',

            deleteColumnsVisible: false,
            deleteColumns: null,
        };
    }

    limit = 5;

    componentDidMount() {
        this._getColumns(0);
    }

    _getColumns(offset) {
        window.$http.postForm("/columns/gets", {
            offset: offset,
            limit: this.limit,
        }).then(res => {
            if (res.status === 10000) {
                this.setState({columns: res.columns, count: res.columnsCount});
                console.log("columns:", res.columns);
                return
            }
            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    _getSeeds(offset) {
        window.$http.postForm("/seed/gets", {
            offset: offset,
            limit: this.limit,
        }).then(res => {
            if (res.status === 10000) {
                this.setState({seeds: res.seeds, seedsCount: res.count});
                console.log("settings", res.settings);
                return
            }
            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    addColumns() {
        this._getSeeds(0);
        this.setState({addColumnsVisible: true});
    }

    _addColumns() {
        window.$http.postForm("/columns/add", {
            seed_id: this.state.addSeedID,
            value: this.state.addValue,
        }).then(res => {
            if (res.status === 10000) {
                this.setState({addColumnsVisible: false, addSeedID: 0, addValue: ''});
                this._getColumns((this.state.columnsCurrent - 1) * this.limit);
                window.$message.success("添加成功");
                return
            }
            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    deleteColumns(item) {
        this.setState({deleteColumnsVisible: true, deleteColumns: item});
    }

    _deleteColumns() {
        window.$http.postForm("/columns/del", {
            columns_id: this.state.deleteColumns.ID,
        }).then(res => {
            if (res.status === 10000) {
                this.setState({deleteColumnsVisible: false, deleteColumns: null});
                this._getColumns((this.state.columnsCurrent - 1) * this.limit);
                window.$message.success("删除成功");
                return
            }
            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    render() {
        const marginBottom = 10;
        return <>
            <Button type={"primary"} style={{marginLeft: 10, marginBottom: 10}}
                    onClick={() => this.addColumns()}><Icon type={'plus'}/>添加排版</Button>
            <Table rowKey={record => record.ID}
                   pagination={{
                       total: this.state.columnsCount,
                       current: this.state.columnsCurrent,
                       pageSize: this.limit,
                       onChange: (page) => {
                           this.setState({columnsCurrent: page});
                           this._getColumns((page - 1) * this.limit);
                       }
                   }}
                   columns={this.columnColumns} dataSource={this.state.columns}/>
            {
                this.state.addColumnsVisible ?
                    <Modal visible={this.state.addColumnsVisible} closable={false}
                           width={1000}
                           onOk={() => this._addColumns()}
                           onCancel={() => this.setState({
                               addColumnsVisible: false,
                               addSeedID: 0, addValue: '',
                           })}>
                        <Table columns={this.seedColumns}
                               dataSource={this.state.seeds}
                               pagination={{
                                   total: this.state.seedsCount,
                                   current: this.state.seedsCurrent,
                                   pageSize: this.limit,
                                   onChange: (page) => {
                                       this.setState({seedsCurrent: page});
                                       this._getSeeds((page - 1) * this.limit);
                                   }
                               }}
                               rowSelection={{
                                   type: 'radio',
                                   onChange: (selectedRowsKey, selectedRows) => {
                                       this.setState({
                                           addSeedID: selectedRows[0].ID,
                                       });
                                   },
                               }}/>
                        <TextArea placeholder={'json'} style={{marginBottom: marginBottom, minHeight: 200}}
                                  autosize={true}
                                  onChange={({target}) => this.setState({addValue: target.value})}
                                  value={this.state.addValue}/>
                    </Modal> : null
            }
            {
                this.state.deleteColumnsVisible ?
                    <Modal visible={this.state.deleteColumnsVisible} closable={false}
                           onOk={() => this._deleteColumns()}
                           onCancel={() => this.setState({deleteColumnsVisible: false, deleteColumns: null})}>
                        <Text>是否删除此排版？</Text><Text>ID:{this.state.deleteColumns.ID}</Text>
                    </Modal> : null
            }
        </>
    }
}